CloudFront FunctionsでBasic認証のパスワードをかける
前提
- すでに、CloudFrontの設定は済んでいる
- Origin側との接続も済んでいる
準備：パスワードの文字列作成
まず、パスワードの文字列を作ります。
以下のパスワードを作ることを想定しています。
ID：classmethod Password：0912cm
CloudShellが使えるリージョンに行きます。ここでは Tokyo リージョンを使用します。
以下のように入力
echo -n "classmethod:0912cm" | base64
出てきた文字列を記録します。
Y2xhc3NtZXRob2Q6MDkxMmNt
CloudFront Functions の作成
CloudFront から Functions に行きます。
Create Functionをクリックします。
Functionの名前を決めます。任意の名前で大丈夫ですが、ここでは「s3-cf-keisuke-function」という名前にしています。
Buildの中で、Function codeを入力します。 6行目のauthStringの中で先程の作成した文字列を入力しています。
function handler(event) {
var request = event.request;
var headers = request.headers;
// echo -n user:pass | base64
var authString = "Basic Y2xhc3NtZXRob2Q6MDkxMmNt";
if (
typeof headers.authorization === "undefined" ||
headers.authorization.value !== authString
) {
return {
statusCode: 401,
statusDescription: "Unauthorized",
headers: { "www-authenticate": { value: "Basic" } }
};
}
return request;
}
Save changesをクリックします。
Publishタブに移動し、Publishします。
ここでどのDistributionにこの Function を使うかの設定も可能なのですが、どうもここで設定すると、どのURLでBasic認証をかけているかが直感的ではない気がするので、ここでは設定しません。
Distribution の設定
CloudFront の Distributions に移動します。 該当 Distribution を開きます。
Behaviorタブから該当Behaviorを選択し、Editをクリックします。
画面一番下にスクロールして、Viewer Requestを設定します。 CloudFront Functionsを選択し、該当のFuncionここでは「s3-cf-keisuke-function」を選びます。 Save Changesをクリックします。
テスト
ここでは、 https://s3-cf-keisuke-web.cmth.work という名前で Distribution が設定されているものとします。
下記のように、ログイン画面が表示されます。
最初に入力した、IDとPasswordでログインできれば成功です。
まとめ
１つしかユーザー情報を設定できないものの、設定の手軽さと、動作の軽量さがあり、とてもとても便利な方法だと思います。
